<template>
  <!-- 发送图片前的预览 -->
  <div class="image-preview">
    <div class="image-wrapper flex-center">
      <img :src="image" alt="preview-image" class="preview-image">
    </div>

    <div class="action">
      <div class="item flex-center" @click="onCancel">
        <span>取消</span>
      </div>
      <div class="item send flex-center" @click="onSend" :style="{'background': bgColor}">
        <span>{{ sendText }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class SendImagePreview extends Vue {
  @Prop({})
  image: any;

  @Prop({
    default: () => '发送'
  })
  sendText: any;

  @Prop({
    default: () => 'rgb(87, 189, 109)'
  })
  bgColor: any;

  protected mounted() {}

  /**
   * 取消
   */
  private onCancel() {
    this.$emit('cancel');
  }

  private onSend() {
    this.$emit('send');
  }
}
</script>

<style lang="stylus" scoped>
.image-preview
  position fixed
  width 100%
  height 100%
  top 0
  left 0
  background black
  padding-bottom 16px
  box-sizing border-box
  z-index 9999

.image-wrapper
  height 95%
  width 100% 

.preview-image
  width 100%
  max-height 100% 

.action
  height 40px
  width 100%
  display flex
  justify-content space-between
  align-items center
  padding 4px
  box-sizing border-box
  .item 
    width 48px
    height 100% 
    line-height 100% 
    color white
    &.send 
      background rgb(87, 189, 109)
      border-radius 4px
</style>

